<template>
  <div>
    <headerNav @search="search"/>
    <breadcrumb />
    <div class="goodsBox" ref="goodsBox">
      <div class="goodsList">
        <div v-if="goods.length<1">
          <div class="data">
            暂无数据
          </div>
        </div>
        <div
          v-else
          class="goods"
          v-for="(item, index) in goods"
          :key="index"
          :style="'width:' + boxWidth + 'px'"
        >
          <div class="shop" ref="shop" @mouseover="mouseOver($event, index)" 
            @mouseleave="mouseleave($event, index)"
            @click="linkInfo(item)">
            <img
              :id="'img' + index"
              :src="getImgUrl(item)"
              :width="imgWidth"
              height="270"
              alt="123"
            />
            <div class="info">
              <div :ref="'info_' + index" class="goodsInfo">查看详情</div>
              <div class="spec">
                {{item.goods_name}}
              </div>
              <p class="price">
                <span style="font-size:15px;color:black">{{item.goods_price*0.8}} 价格</span><span style="text-decoration: line-through;color: #666;margin-left: 20px;">¥ {{item.goods_price}}</span>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import headerNav from "@/components/index/headerNav";
import breadcrumb from "@/components/index/breadcrumb";
import { findAllGoods,findGoodsBySearch } from "@/js/api/home";
export default {
  name: "goodsList",
  components: {
    headerNav,
    breadcrumb,
  },
  data() {
    return {
      goods: [],
      boxWidth: 0,
      imgWidth: 0,
    };
  },
  computed: {
    type: function () {
      return this.$route.params.type;
    },
    width: function () {
      return 0;
    },
  },
  mounted() {
    this.boxWidth = (this.$refs.goodsBox.offsetWidth - 100) / 4 - 7;
    this.imgWidth = this.boxWidth - 21;
  },
  created(){
    this.loadList()
  },
  methods: {
    getImgUrl(url){
      return require("@/assets/img/"+url.goods_src);
    },
    search(val){
      findGoodsBySearch({search:val.value}).then(response=>{
        if(response.data.state){
          this.goods = response.data.data
        }
      })
    },
    loadList(){
      let val
      try{
        val = JSON.parse(this.$route.params.val)
      }catch(e){
        val = null
      }
      
      if(val==null){
        let obj = {
          u1:0,
          u2:10,
          t:this.$route.params.type
        }
        findAllGoods(obj).then(response=>{
          if(response.data.state){
            this.goods = response.data.data
          }
        })
      }else this.search(val)
    },
    mouseOver(val, index) {
      let e = 'info_'+index
      this.$refs[e][0].style = 'display:block'
      this.$refs.shop[index].style = `border:1px solid #F57;box-sizing:border-box`;
    },
    mouseleave(val, index) {
      let e = 'info_'+index
      this.$refs[e][0].style = 'display:none'
      this.$refs.shop[index].style = "border:none";
    },
    linkInfo(val){
      let info = {
        type:val.type,
        goodsId:val.id
      }
      this.$router.push({name: 'goodsDetails', params: {obj: JSON.stringify(info)}});
    }
  },
  watch:{
    $route(){
      this.loadList()
    }
  }
};
</script>
<style lang="less">
.goodsBox {
  margin-top: 20px;
  padding: 20px 50px;
  .goodsList {
    height: 100%;
    display: flex;
    flex-wrap:wrap;
    padding-left: 10px;
    .data{
      border: 1px solid #606266;
      padding: 20px;
      font-size: 20px;
      color: #606266;
    }
    .goods {
      padding: 20px 0px;
      height: 350px;
      .shop {
        cursor: pointer;
        position: relative;
        color: #666;
        font-size: 14px;
        background-color: white;
        margin-right: 20px;
        border-radius: 0px;
        border: 1px solid #dcdfe6;
        box-shadow: 2px 2px 9px #c6c7c8;
        height: 100%;
      }
      .info {
        padding: 0 10px;
        position: absolute;
        width: 100%;
        height: 76px;
        box-sizing: border-box;
        .spec {
          font-size: 13px;
          height: 52px;
          overflow: hidden;
        }
        .price {
          margin: 0;
          font-size: 13px;
        }
        .goodsInfo {
          display: none;
          width: 100%;
          height: 25px;
          text-align: center;
          line-height: 25px;
          color: white;
          top: -28px;
          left: 0;
          position: absolute;
          background-color: #FF5577B3;
        }
      }
    }
  }
}
</style>